$(document).ready(function() {
	/* ************************ */
	/*			table			*/
	/* ************************ */
	var rowCount = 0;
	$("#add_obj").click(function(){
		rowCount++;
		var data = "";
		data += '<div class="row d" id="row' + rowCount + '" data-id="' + rowCount + '">';
		data += 	'<div class="c"><input type="checkbox"></div>';
		data +=		'<div class="n"><input type="text" class="name" id="name' + rowCount + '" data-id="' + rowCount + '" /></div>';
		data +=		'<div class="m"><input type="text" class="mass" id="mass' + rowCount + '" data-id="' + rowCount + '" /></div>';
		data +=		'<div class="v"><input type="text" class="volume" id="volume' + rowCount + '" data-id="' + rowCount + '" /></div>';
		data +=		'<div class="d"><input type="text" class="density disabled" id="density' + rowCount + '" disabled="disabled" data-id="' + rowCount + '" /></div>';
		data +=		'<div class="x"><img src="../images/x3.png" class="delete" /></div>';
		data += "</div>";
		$(this).parent().before(data);
		$(this).attr("data-num", rowCount);
	});
	
	
	/* **************************** */
	/*			table handlers		*/
	/* **************************** */
	var objCount = 0;
	$(document).on('change', '.name', function() {
		if(!$(this).hasClass("added")) {
			objCount++;
			var left = 20 + 30 + 1 + ((objCount-1) * 55);
			var objBar = '<div id="obj' + objCount + '" class="obj" style="left: ' + left + 'px;" data-id="' + objCount + '">';
			
			objBar += '<span class="barWrapper"><span class="bar" id="bar' + objCount + '"></span></span>';
			
			objBar += '<span class="line" id="line' + objCount + '"></span>';
			
			var val = $(this).val();
			objBar += '<span class="material" id="material' + objCount + '">' + val + '</span>';
			
			objBar += '</div>';
			
			objBar += '<span class="longLine hide" id="longLine' + objCount + '"></span>';
			
			$('.g1 .x_axis').append(objBar);
			$("#material" + objCount).animate({height: "16px"}, 500);
			$("#line" + objCount).animate({height: "40px"}, 500);
			$(this).addClass("added");
		} else {
			var id = $(this).attr("data-id");
			var val = $(this).val();
			$("#material" + id).html(val);
		}
	});
	$(document).on('change', '.mass', function() {
		massVol($(this));
	});
	$(document).on('change', '.volume', function() {
		massVol($(this));
	});
	function massVol($this) {
		var id = $this.attr("data-id");
		var mass = $("#mass" + id).val();
		var volume = $("#volume" + id).val();
		if(mass != null && mass != '' && volume != null && volume != '') {
			var density = Math.round( (mass/volume) * 10 ) / 10;
			$("#density" + id).val(density);
			
			$this.parent().parent().addClass("denComplete");
			
			var height = 50 * density;
			var top = 500 - height;
			$("#bar" + id).animate({top: top, height: height}, 1000).html(density);
			
			var g = top + 45;
			$("#longLine" + id).css("top", g);
		}
	}
	$(document).on('click', '.delete', function() {
		var id = $(this).parent().parent().attr("data-id");
		$("#row" + id).animate({height: "0"}, 500, function(){ $(this).remove(); });
		$("#obj" + id).animate({width: "0"}, 500, function(){ $(this).remove(); });
	});
	$(document).on('click', '.row', function() {
		highlightBar($(this).attr("data-id"));
	});
	$(document).on('click', '.bar', function() {
		highlightBar($(this).parent().parent().attr("data-id"));
	});
	function highlightBar(id) {
		if($("#row" + id).hasClass("denComplete")) {
			var active = $("#row" + id).hasClass("active");
			$(".row.active").children(".c").children("input").removeAttr("checked");
			$(".row.active").removeClass("active");
			$(".bar.active").removeClass("active");
			$(".longLine.active").removeClass("active");
			if(!active) {
				$("#row" + id).addClass("active");
				$("#row" + id + " > .c > input").attr("checked", "checked");
				$("#bar" + id).addClass("active");
				$("#longLine" + id).addClass("active");
			}
		}
	}
	
	
	
	
	
	/* **************************** */
	/*			Graph axis			*/
	/* **************************** */
	$(".y_axis .num").each(function(){
		var num = $(this).attr("data-num");
		var top = 545 - (num*50) - 6;
		$(this).css("top", top);
	
		var topL = top + 6;
		var line = '<span class="line" style="top: '+topL+'px;"></span>';
		$(this).after(line);
		
		var gridLine = '<span class="gridLine" style="top: '+topL+'px;"></span>';
		$(this).after(gridLine);
	});
	
	var materialNum2 = 0;
	$(".g2 .x_axis .material").each(function(){
		var density = $(this).attr("data-density");
		var left = 20 + 30 + 1 + (materialNum2 * 55);
		$(this).css("left", left);
		materialNum2++;

		var leftL = left - 1;
		var line = '<span class="line" style="left: '+leftL+'px;"></span>';
		$(this).after(line);

		var heightB = 50 * density;
		var topB = 500 - heightB + 45;
		var bar = document.createElement('span');
		$(bar).addClass("bar").css("left", left + "px").html(density);
		//var bar = '<span class="bar" style="left:' + left + 'px; top: ' + topB + 'px; height: ' + heightB + 'px;">' + density + '</span>';
		$(".bar2_axis").append(bar);
		$(bar).animate({height: heightB, top: topB + "px"}, 1000);
	});
	
});